revision:
The <colgroup> tag specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements. To define different properties to a column within a <colgroup>, the <col> tag can be used within the <colgroup> tag.
The <col> tag specifies column properties for each column within a <colgroup> element. >The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
span : value:"number";
specifies the number of columns a column group or <col> element should span.
<col span=" "> . . . </col>
<colgroup> . . . </colgroup>
| order number | product | price |
|---|---|---|
| 3476896 | mobile phone | $53 |
| 5869207 | electric fan | $49 |
code:
<div class="spec-1">
<table class="example">
<colgroup>
<col span="2" style="background-color:dodgerblue"/>
<col style="background-color:lightgreen"/>
</colgroup>
<tr>
<th>order number</th>
<th>product</th>
<th>price</th>
</tr>
<tr>
<td>3476896</td>
<td>mobile phone</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>electric fan</td>
<td>$49</td>
</tr>
</table>
</div>
| Item | Qty. | Price | Cost |
|---|---|---|---|
| Bananas | 5 | 0.50 | 2.50 |
| Apples | 2 | 0.25 | 0.50 |
| Oranges | 3 | 0.75 | 2.25 |
| TOTAL | 5.25 | ||
code:
<div class="spec-1">
<table class="example">
<colgroup>
<col span="3">
<col class="total">
</colgroup>
<tr>
<th>Item</th>
<th>Qty.</th>
<th>Price</th>
<th>Cost</th>
</tr>
<tr>
<tr>
<td>Bananas</td>
<td>5</td>
<td>0.50</td>
<td>2.50</td>
</tr>
<tr>
<td>Apples</td>
<td>2</td>
<td>0.25</td>
<td>0.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>3</td>
<td>0.75</td>
<td>2.25</td>
</tr>
<tr>
<td colspan="3">TOTAL</td>
<td>5.25</td>
</tr>
</table>
</div>
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell |
<div class="spec-1">
<table class="example">
<colgroup>
<col style="background:#AEF642;">
<col span="3" style="background:#F4FBEA;">
<col style="background:orange;">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
| name | age | branch |
|---|---|---|
| Nelson | 22 | CSE |
| Trevor | 21 | ECE |
code:
<div class="spec-1">
<table class="example">
<colgroup>
<col span="1" style="background-color: lightgreen" />
<col span="1" style="background-color: lightblue" />
<col span="1" style="background-color: none" />
</colgroup>
<tr>
<th>name</th>
<th>age</th>
<th>branch</th>
</tr>
<tr>
<td>Nelson</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>Trevor</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</div>
Codes:
<style>
.column {float: left; width: 27%; height: 30vw;}
</style>
<div>